<?php
/**
 * @version     kingadmin-v1.2-tx
 * @package     tpl_gpcb
 * @copyright   Copyright (C) 2014. All Rights Reserved
 * @license     Creative Commons Attribution-NoDerivatives 4.0 International License
 * @author      caballeroantonio <caballeroantonio@hotmail.com> - http://caballeroantonio.com
 */

// No direct access
defined('_JEXEC') or die;

$kbpath = 'templates/gpcb';
$this->document->page_class = 'forms-elements';
?>

							<div class="main-header">
								<h2>Form Elements</h2>
								<em>a collection of form elements</em>
							</div>

							<div class="main-content">
								<div class="row">
									<div class="col-md-6">
										<!-- MULTISELECT -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Multiselect</h3></div>
											<div class="widget-content">
												<p>Multiple Selection</p>
												<select id="multiselect1" name="multiselect1[]" class="multiselect" multiple="multiple">
													<option value="cheese">Cheese</option>
													<option value="tomatoes">Tomatoes</option>
													<option value="mozarella">Mozzarella</option>
													<option value="mushrooms">Mushrooms</option>
													<option value="pepperoni">Pepperoni</option>
													<option value="onions">Onions</option>
												</select>
												<hr class="inner-separator" />
												<p>Single Selection</p>
												<select id="multiselect2" name="multiselect2">
													<option value="cheese">Cheese</option>
													<option value="tomatoes">Tomatoes</option>
													<option value="mozarella">Mozzarella</option>
													<option value="mushrooms">Mushrooms</option>
													<option value="pepperoni">Pepperoni</option>
													<option value="onions">Onions</option>
												</select>
												<hr class="inner-separator" />
												<p>Select All Enabled</p>
												<select id="multiselect3-all" name="multiselect3[]" class="multiselect" multiple="multiple">
													<option value="multiselect-all">Select All</option>
													<option value="cheese">Cheese</option>
													<option value="tomatoes">Tomatoes</option>
													<option value="mozarella">Mozzarella</option>
													<option value="mushrooms">Mushrooms</option>
													<option value="pepperoni">Pepperoni</option>
													<option value="onions">Onions</option>
												</select>
												<hr class="inner-separator" />
												<p>Filter Enabled</p>
												<select id="multiselect4-filter" name="multiselect4[]" class="multiselect" multiple="multiple">
													<option value="bootstrap">Bootstrap</option>
													<option value="bootstrap-marketplace">Bootstrap Marketplace</option>
													<option value="bootstrap-theme">Bootstrap Theme</option>
													<option value="html">HTML</option>
													<option value="html-template">HTML Template</option>
													<option value="wp-marketplace">WordPress Marketplace</option>
													<option value="wp-plugin">WordPress Plugin</option>
													<option value="wp-theme">WordPress Theme</option>
												</select>
												<hr class="inner-separator" />
												<p>Disabled Options</p>
												<select id="multiselect5" name="multiselect5[]" class="multiselect" multiple="multiple">
													<option value="cheese">Cheese</option>
													<option value="tomatoes">Tomatoes</option>
													<option value="mozarella" disabled="disabled">Mozzarella</option>
													<option value="mushrooms">Mushrooms</option>
													<option value="pepperoni">Pepperoni</option>
													<option value="onions" disabled="disabled">Onions</option>
												</select>
												<hr class="inner-separator" />
												<p>Options Group</p>
												<select id="multiselect6" name="multiselect6" multiple="multiple">
													<optgroup label="Mathematics">
														<option value="analysis">Analysis</option>
														<option value="algebra">Linear Algebra</option>
														<option value="discrete">Discrete Mathematics</option>
														<option value="numerical">Numerical Analysis</option>
														<option value="probability">Probability Theory</option>
													</optgroup>
													<optgroup label="Computer Science">
														<option value="programming">Introduction to Programming</option>
														<option value="automata">Automata Theory</option>
														<option value="complexity">Complexity Theory</option>
														<option value="software">Software Engineering</option>
													</optgroup>
												</select>
												<hr class="inner-separator" />
												<p>With Add-Ons</p>
												<div class="input-group btn-group">
													<span class="input-group-addon"><i class="fa fa-list-ul"></i></span>
													<select id="multiselect7-addon" name="multiselect7[]" class="multiselect" multiple="multiple">
														<option value="cheese">Cheese</option>
														<option value="tomatoes">Tomatoes</option>
														<option value="mozarella">Mozzarella</option>
														<option value="mushrooms">Mushrooms</option>
														<option value="pepperoni">Pepperoni</option>
														<option value="onions">Onions</option>
													</select>
												</div>
												<hr class="inner-separator" />
												<p>Color (btn-primary)</p>
												<select id="multiselect-color" name="multiselect8[]" class="multiselect" multiple="multiple">
													<option value="cheese">Cheese</option>
													<option value="tomatoes">Tomatoes</option>
													<option value="mozarella">Mozzarella</option>
												</select>
												<hr class="inner-separator" />
												<p>Smaller size (btn-sm)</p>
												<select id="multiselect-size" name="multiselect9[]" class="multiselect" multiple="multiple">
													<option value="cheese">Cheese</option>
													<option value="tomatoes">Tomatoes</option>
													<option value="mozarella">Mozzarella</option>
												</select>
												<hr class="inner-separator" />
												<p>Link (btn-link)</p>
												<select id="multiselect-link" name="multiselect10[]" class="multiselect" multiple="multiple">
													<option value="cheese">Cheese</option>
													<option value="tomatoes">Tomatoes</option>
													<option value="mozarella">Mozzarella</option>
												</select>
											</div>
										</div>
										<!-- END MULTISELECT -->

										<!-- SELECT2 -->
										<div class="widget">
											<div class="widget-header">
												<h3><i class="fa fa-edit"></i> Select2</h3> <em> - another replacement for select boxes</em>
												<div class="btn-group widget-header-toolbar">
													<div class="label label-info">NEW</div>
												</div>
											</div>
											<div class="widget-content">
												<select name="select2" id="select2" class="select2">
													<option value="option1">Option 1</option>
													<option value="option2">Option 2</option>
													<option value="option3">Option 3</option>
													<option value="option4">Option 4</option>
												</select>
												<hr class="inner-separator" />
												<select multiple name="select2-multiple1" id="select2-multiple1" class="select2 select2-multiple">
													<optgroup label="Alaskan/Hawaiian Time Zone">
														<option value="AK">Alaska</option>
														<option value="HI">Hawaii</option>
													</optgroup>
													<optgroup label="Pacific Time Zone">
														<option value="CA">California</option>
														<option value="NV">Nevada</option>
														<option value="OR">Oregon</option>
														<option value="WA" selected="selected">Washington</option>
													</optgroup>
													<optgroup label="Mountain Time Zone">
														<option value="AZ">Arizona</option>
														<option value="CO">Colorado</option>
														<option value="ID">Idaho</option>
														<option value="MT" selected="selected">Montana</option>
														<option value="NE">Nebraska</option>
														<option value="NM">New Mexico</option>
														<option value="ND">North Dakota</option>
														<option value="UT">Utah</option>
														<option value="WY">Wyoming</option>
													</optgroup>
													<optgroup label="Central Time Zone">
														<option value="AL">Alabama</option>
														<option value="AR">Arkansas</option>
														<option value="IL">Illinois</option>
														<option value="IA">Iowa</option>
														<option value="KS">Kansas</option>
														<option value="KY">Kentucky</option>
														<option value="LA">Louisiana</option>
														<option value="MN">Minnesota</option>
														<option value="MS">Mississippi</option>
														<option value="MO">Missouri</option>
														<option value="OK">Oklahoma</option>
														<option value="SD">South Dakota</option>
														<option value="TX">Texas</option>
														<option value="TN">Tennessee</option>
														<option value="WI">Wisconsin</option>
													</optgroup>
													<optgroup label="Eastern Time Zone">
														<option value="CT">Connecticut</option>
														<option value="DE">Delaware</option>
														<option value="FL">Florida</option>
														<option value="GA">Georgia</option>
														<option value="IN">Indiana</option>
														<option value="ME">Maine</option>
														<option value="MD">Maryland</option>
														<option value="MA">Massachusetts</option>
														<option value="MI">Michigan</option>
														<option value="NH">New Hampshire</option>
														<option value="NJ">New Jersey</option>
														<option value="NY">New York</option>
														<option value="NC">North Carolina</option>
														<option value="OH">Ohio</option>
														<option value="PA">Pennsylvania</option>
														<option value="RI">Rhode Island</option>
														<option value="SC">South Carolina</option>
														<option value="VT">Vermont</option>
														<option value="VA">Virginia</option>
														<option value="WV">West Virginia</option>
													</optgroup>
												</select>
											</div>
										</div>
										<!-- END SELECT2 -->

										<!-- TAGS INPUT -->
										<div class="widget">
											<div class="widget-header">
												<h3><i class="fa fa-edit"></i> Tags Input</h3>
												<div class="btn-group widget-header-toolbar">
													<div class="label label-info">NEW</div>
												</div>
											</div>
											<div class="widget-content">
												<p class="help-block"><em>Type a word then hit enter</em></p>
												<input type="text" value="bootstrap, responsive, admin, theme" data-role="tagsinput" />
											</div>
										</div>
										<!-- END TAGS INPUT -->

										<!-- SWITCH BUTTONS ETC -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Switch Button, Checkboxes &amp; Radio Button</h3></div>
											<div class="widget-content">
												<input type="checkbox" checked class="switch-demo switch-small" data-off="default">
												<input type="checkbox" checked class="switch-demo switch-small" data-on="danger" data-off="default">
												<input type="checkbox" checked class="switch-demo switch-small" data-on="success" data-off="warning" data-on-label="<i class='fa fa-check'></i>" data-off-label="<i class='fa fa-warning'></i>">
												<input type="checkbox" checked class="switch-demo switch-mini" data-off="default">
												<input type="checkbox" checked class="switch-demo switch-mini" data-on="danger" data-off="default">
												<input type="checkbox" checked class="switch-demo switch-mini" data-on="success" data-off="warning" data-on-label="<i class='fa fa-check'></i>" data-off-label="<i class='fa fa-warning'></i>">
												
												<hr class="inner-separator" />
												
												<input type="checkbox" checked class="switch-demo switch-large" data-off="default">
												<input type="checkbox" checked class="switch-demo" data-off="default">
												<input type="checkbox" checked class="switch-demo switch-small" data-off="default">
												<input type="checkbox" checked class="switch-demo switch-mini" data-off="default">

												<hr class="inner-separator" />

												<input type="checkbox" checked class="switch-demo" disabled>
												<input type="checkbox" class="switch-demo" readonly>
												<input type="checkbox" checked class="switch-demo" data-on-label="YES" data-off-label="NO">
												<input type="checkbox" checked class="switch-demo" data-text-label="TV">

												<hr class"inner-separator" />

												<div class="form-group">
													<label for="option1">Option 1</label>
													<input id="option1" type="radio" class="switch-radio-demo switch-small" name="switch-radio" value="option1">
													<label for="option2">Option 2</label>
													<input id="option2" type="radio" class="switch-radio-demo switch-small" name="switch-radio" value="option2">
													<label for="option3">Option 3</label>
													<input id="option3" type="radio" class="switch-radio-demo switch-small" name="switch-radio" value="option3">
												</div>

												<hr class="inner-separator" />

												<div class="row">
													<div class="col-md-6">
														<div class="onoffswitch">
															<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
															<label class="onoffswitch-label" for="myonoffswitch">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													
														<div class="onoffswitch">
															<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2">
															<label class="onoffswitch-label" for="myonoffswitch2">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													
														<div class="onoffswitch onoffswitch-blank">
															<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch3" checked>
															<label class="onoffswitch-label" for="myonoffswitch3">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													</div>
													<div class="col-md-6">
														<h4>Checkbox</h4>
														<div class="control-inline onoffswitch">
															<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch4" checked>
															<label class="onoffswitch-label" for="myonoffswitch4">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													
														<div class="control-inline onoffswitch">
															<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch5">
															<label class="onoffswitch-label" for="myonoffswitch5">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													
														<div class="control-inline onoffswitch">
															<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch6" checked>
															<label class="onoffswitch-label" for="myonoffswitch6">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
														<h4>Radio Button</h4>
														<div class="control-inline onoffswitch">
															<input type="radio" name="onoffswitch-radio" class="onoffswitch-checkbox" id="switch-radio1" checked>
															<label class="onoffswitch-label" for="switch-radio1">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													
														<div class="control-inline onoffswitch">
															<input type="radio" name="onoffswitch-radio" class="onoffswitch-checkbox" id="switch-radio2">
															<label class="onoffswitch-label" for="switch-radio2">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													
														<div class="control-inline onoffswitch">
															<input type="radio" name="onoffswitch-radio" class="onoffswitch-checkbox" id="switch-radio3" checked>
															<label class="onoffswitch-label" for="switch-radio3">
																<div class="onoffswitch-inner"></div>
																<div class="onoffswitch-switch"></div>
															</label>
														</div>
													</div>
												</div>
												
												<hr class="inner-separator" />

												<div class="simple-checkbox">
													<input type="checkbox" id="checkbox1">
													<label for="checkbox1">Simple Checkbox</label>
												</div>
											
												<div class="simple-checkbox">
													<input type="checkbox" id="checkbox2" checked>
													<label for="checkbox2">Simple Checkbox</label>
												</div>
											
												<div class="simple-checkbox">
													<input type="checkbox" id="checkbox3">
													<label for="checkbox3">Simple Checkbox</label>
												</div>

												<div class="control-inline simple-checkbox">
													<input type="checkbox" id="checkbox4">
													<label for="checkbox4">Simple Checkbox</label>
												</div>
											
												<div class="control-inline simple-checkbox">
													<input type="checkbox" id="checkbox5" checked>
													<label for="checkbox5">Simple Checkbox</label>
												</div>
											
												<div class="control-inline simple-checkbox">
													<input type="checkbox" id="checkbox6">
													<label for="checkbox6">Simple Checkbox</label>
												</div>
											
												<hr class="inner-separator" />

												<div class="simple-radio">
													<input id="male" type="radio" name="gender" value="male">
													<label for="male">Male</label>
													<input id="female" type="radio" name="gender" value="female">
													<label for="female">Female</label>
												</div>
												<div class="row">
													<div class="col-md-4">
														<div class="simple-radio radio-green">
															<input id="radio1" type="radio" name="green" value="radio1">
															<label for="radio1">Radio 1</label>
															<input id="radio2" type="radio" name="green" value="radio2">
															<label for="radio2">Radio 2</label>
															<input id="radio3" type="radio" name="green" value="radio3">
															<label for="radio3">Radio 3</label>
														</div>
													</div>
													<div class="col-md-4">
														<div class="simple-radio radio-green">
															<input id="radio4" type="radio" name="green" value="radio4">
															<label for="radio4">Radio 4</label>
															<input id="radio5" type="radio" name="green" value="radio5">
															<label for="radio5">Radio 5</label>
															<input id="radio6" type="radio" name="green" value="radio6">
															<label for="radio6">Radio 6</label>
														</div>
													</div>
													<div class="col-md-4">
														<div class="simple-radio radio-green">
															<input id="radio7" type="radio" name="green" value="radio7">
															<label for="radio7">Radio 7</label>
															<input id="radio8" type="radio" name="green" value="radio8">
															<label for="radio8">Radio 8</label>
															<input id="radio9" type="radio" name="green" value="radio9">
															<label for="radio9">Radio 9</label>
														</div>
													</div>
												</div>
												
												<div class="simple-radio simple-radio-inline radio-green">
													<input id="radioa" type="radio" name="green-inline" value="radioa">
													<label for="radioa">Radio A</label>
													<input id="radiob" type="radio" name="green-inline" value="radiob">
													<label for="radiob">Radio B</label>
													<input id="radioc" type="radio" name="green-inline" value="radioc">
													<label for="radioc">Radio C</label>
												</div>
											</div>
										</div>
										<!-- END SWITCH BUTTONS ETC -->

										<!-- DYNAMIC FORM FIELDS -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Dynamic Form Fields</h3></div>
											<div class="widget-content">
												<div class="row">
													<div class="col-md-6">
														<input type="hidden" name="count" value="1" />
														<div class="input-appendable-wrapper">
															<input type="hidden" id="count" value="1">
															<div class="input-group input-group-appendable" id="input-group-appendable1">
																<input autocomplete="off" class="input form-control" id="field1" name="field1" type="text" >
																<span class="input-group-btn">
																	<button id="btn1" class="btn btn-primary add-more" type="button">+</button>
																</span>
															</div>
														</div>
														<br/>
														<p>Press + to add another form field</p>
													</div>
												</div>
											</div>
										</div>
										<!-- END DYNAMIC FORM FIELDS -->

										<!-- SPINNER INPUT -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Spinner Input</h3></div>
											<div class="widget-content">
												<div class="row">
													<div class="col-md-6">
														<input id="touchspin1" type="text" class="form-control">
													</div>
													<div class="col-md-6">
														<input id="touchspin2" type="text" class="form-control">
													</div>
												</div><br/>
												<div class="row">
													<div class="col-md-6">
														<input id="touchspin3" type="text" class="form-control">
													</div>
													<div class="col-md-6">
														<input id="touchspin4" type="text" class="form-control">
													</div>
												</div>
											</div>
										</div>
										<!-- END SPINNER INPUT -->

									</div>

									<div class="col-md-6">
										<!-- MASKED INPUT -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Masked Input</h3></div>
											<div class="widget-content">
												<form class="form-horizontal label-left" role="form">
													<div class="form-group">
														<label for="phone" class="col-sm-5 control-label" >Phone <br/><small>(999) 999-9999</small></label>
														<div class="col-sm-7">
															<input type="text" id="phone" class="form-control">
														</div>
													</div>
													<div class="form-group">
														<label for="phone-ex" class="col-sm-5 control-label" >Phone + Ext <br/><small>(999) 999-9999? x99999</small></label>
														<div class="col-sm-7">
															<input type="text" id="phone-ex" class="form-control">
														</div>
													</div>
													<div class="form-group">
														<label for="tax-id" class="col-sm-5 control-label" >Tax ID <br/><small>99-9999999</small></label>
														<div class="col-sm-7">
															<input type="text" id="tax-id" class="form-control">
														</div>
													</div>
													<div class="form-group">
														<label for="ssn" class="col-sm-5 control-label" >SSN <br/><small>999-99-9999</small></label>
														<div class="col-sm-7">
															<input type="text" id="ssn" class="form-control">
														</div>
													</div>
													<div class="form-group">
														<label for="product-key" class="col-sm-5 control-label" >Product Key <br/><small>a*-999-a999</small></label>
														<div class="col-sm-7">
															<input type="text" id="product-key" class="form-control">
														</div>
													</div>
												</form>
											</div>
										</div>
										<!-- END MASKED INPUT -->

										<!-- SLIDER INPUT -->
										<div class="widget">
											<div class="widget-header">
												<h3><i class="fa fa-edit"></i> Slider Input</h3>
												<div class="btn-group widget-header-toolbar">
													<div class="label label-info">NEW</div>
												</div>
											</div>
											<div class="widget-content">
												<div class="row">
													<div class="col-sm-10">
														<input type="text" class="bootstrap-slider" value="">
													</div>
													<div class="col-sm-2">
														<span class="label label-warning label-slider"></span>
													</div>
												</div>
												
												<input type="text" class="bootstrap-slider-step" value="">

												<hr class="inner-separator" />
												
												<input type="text" class="bootstrap-slider-vertical" value="">
												<input type="text" class="bootstrap-slider-vertical" value="">
												<input type="text" class="bootstrap-slider-vertical" value="">
												<input type="text" class="bootstrap-slider-vertical" value="">
												<input type="text" class="bootstrap-slider-vertical" value="">
												<input type="text" class="bootstrap-slider-vertical" value="">
												<input type="text" class="bootstrap-slider-vertical" value="">
											</div>
										</div>
										<!-- SLIDER INPUT -->

										<!-- RANGE SLIDER INPUT -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Range Slider Input</h3></div>
											<div class="widget-content">
												<p>Basic Slider</p>
												<div class="basic-slider"></div>
												<div class="alert alert-info demo-hide" id="slider-output"></div>
												<p>Date Slider (style can be adjusted for better left-right alignment)</p>
												<div class="date-slider slider-primary"></div>
												<p>Editable Label (provide value then hit enter)</p>
												<div class="editable-slider slider-success"></div>
												<p>Slider With Step</p>
												<div class="basic-step-slider slider-warning"></div>
												<p>Value Label Shown On Change</p>
												<div class="basic-label-slider slider-danger"></div>
											</div>
										</div>
										<!-- END RANGE SLIDER INPUT -->
										
										<!-- DATE PICKER -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Date Picker</h3></div>
											<div class="widget-content clearfix">
												<p>Date Picker</p>
												<div class="input-group">
													<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
													<input type="text" id="datepicker" class="form-control">
												</div><br/>
												<p>Date Range Picker - <small>time picker can be disabled</small></p>
												<div class="input-group">
													<input type="text" id="daterange-default" class="form-control">
													<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
												</div><br/>
												<p>Report Range - <small>useful for report filter</small></p>
												<div id="reportrange" class="pull-right report-range">
													<i class="fa fa-calendar"></i>
													<span class="range-value"></span><b class="caret"></b>
												</div>
											</div>
										</div>
										<!-- END DATE PICKER -->
										
										<!-- COLOR PICKER -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Color Picker</h3></div>
											<div class="widget-content">
												<div class="row">
													<div class="col-md-8">
														<p>
															<span>Attached to a field</span>
															<input type="text" id="demo1" class="form-control" value="#5367ce" />
														</p>
														<p>
															<span>RGBA format</span>
															<input type="text" id="demo2" class="form-control" value="rgba(182,225,12,0.49)" />
														</p>
														<span>As a component</span>
														<div id="demo3" class="input-group colorpicker-component colorpicker-element">
															<input type="text" value="#0099aa" class="form-control">
															<span class="input-group-addon"><i></i></span>
														</div><br/>
														<p>
															<span>Predefined Color</span>
															<select name="colorpicker-picker-longlist">
																<option value="#ac725e">#ac725e</option>
																<option value="#d06b64">#d06b64</option>
																<option value="#f83a22">#f83a22</option>
																<option value="#fa573c">#fa573c</option>
																<option value="#ff7537">#ff7537</option>
																<option value="#ffad46">#ffad46</option>
																<option value="#42d692">#42d692</option>
																<option value="#16a765">#16a765</option>
																<option value="#7bd148">#7bd148</option>
																<option value="#b3dc6c">#b3dc6c</option>
																<option value="#fbe983">#fbe983</option>
																<option value="#fad165">#fad165</option>
																<option value="#92e1c0">#92e1c0</option>
																<option value="#9fe1e7">#9fe1e7</option>
																<option value="#9fc6e7">#9fc6e7</option>
																<option value="#4986e7">#4986e7</option>
																<option value="#9a9cff">#9a9cff</option>
																<option value="#b99aff">#b99aff</option>
																<option value="#c2c2c2">#c2c2c2</option>
																<option value="#cabdbf">#cabdbf</option>
																<option value="#cca6ac">#cca6ac</option>
																<option value="#f691b2">#f691b2</option>
															</select>
														</p>
													</div>
												</div>
											</div>
										</div>
										<!-- END COLOR PICKER -->

										<!-- TEXTAREA -->
										<div class="widget">
											<div class="widget-header"><h3><i class="fa fa-edit"></i> Text Area</h3></div>
											<div class="widget-content">
												<p>Basic Text Area</p>
												<textarea class="form-control" rows="5" cols="30"></textarea><br/>
												<p>Text Area With Character Count</p>
												<textarea id="textarea" class="form-control" rows="6" cols="30" maxlength="99" ></textarea>
												<p class="help-block text-right js-textarea-help"><span class="text-muted"></span></p>
											</div>
										</div>
										<!-- END TEXTAREA -->

									</div>
								</div><!-- /row -->

							</div><!-- /main-content -->
						

	<!-- Javascript -->
	<script src="<?= $kbpath ?>/assets/js/bootstrap-switch.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/jquery.masked-input.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/bootstrap-multiselect.js"></script>
	<script src="<?= $kbpath ?>/assets/js/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/jQAllRangeSliders-min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/bootstrap-colorpicker.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/jquery.simplecolorpicker.js"></script>
	<script src="<?= $kbpath ?>/assets/js/bootstrap.touchspin.js"></script>
	<script src="<?= $kbpath ?>/assets/js/bootstrap-datepicker.js"></script>
	<script src="<?= $kbpath ?>/assets/js/daterangepicker.js"></script>
	<script src="<?= $kbpath ?>/assets/js/moment.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/bootstrap-slider.js"></script>
	<script src="<?= $kbpath ?>/assets/js/select2.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/bootstrap-tagsinput.min.js"></script>
	<script src="<?= $kbpath ?>/assets/js/king-elements.js"></script>

